<script setup lang="ts">
import {Delete, Plus, Search} from '@element-plus/icons-vue'
import {ElTable} from "element-plus";
import {inject, onMounted, ref} from 'vue'

const axios = inject('axios')

let tableData: {
  name: string
  age: number
  email: string
}[] = []

const multipleTableRef = ref<InstanceType<typeof ElTable>>()

// interface User {
//   name: string
//   age: number
//   email: string
// }

const multipleSelection = ref<User[]>([])
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
}
const currentPage = ref(1)
const pageSize = ref(5)
const small = ref(false)
const disabled = ref(false)
const background = ref(false)
const total = ref(0)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

onMounted(() => {
  load()
})

function load() {
  console.log('load')
  axios({
    method: 'post',
    url: '/user1/getUser',
    data: {}
  }).then((response) => {
    console.log(response)
    // console.log(res)
    // console.log(response.data)
    // console.log(response.data.data
    //  .records)
    this.tableData = (response.data.records)
    //console.log(tableData)
  });
}
</script>

<template>
  <div style="width: 1200px; margin: 0 auto;">
    <div style="text-align:center;">
      <h1>个人信息</h1>
    </div>
    <!-- 添加删除按钮   -->
    <div>
      <el-button type="primary" :icon="Plus">新增</el-button>
      <el-button type="danger" :icon="Delete">删除</el-button>
      <el-button type="primary" :icon="Search">Search</el-button>
    </div>
    <div>
      <el-table
          ref="multipleTableRef"
          :data="tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="Name" width="180"/>
        <el-table-column prop="age" label="Age" width="180"/>
        <el-table-column prop="email" label="Email"/>
      </el-table>
    </div>
    <!--分页-->
    <div style="margin-top: 5px;">
      <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5, 10, 20, 30]"
          :small="small"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<style scoped>

</style>